import {
	HomeCarousel
} from '@/pages/main/HomeCarousel'
import {
	main,
	main_category,
	main_header,
	main_carousel,
	main_category_list,
	category_prent,
	main_search,
	main_carousel_active,
	active_name,
	active_children,
	main_product
} from '@/pages/main/index.module.scss'
import {useCallback, useEffect, useMemo, useReducer, useState} from 'react'
import {category} from '@/api'
import {HomeCategoryType, MainAction, MainJSXType} from '@/type/homeType'
import { Input} from 'antd'
import {SearchOutlined} from '@ant-design/icons'
import {useNavigate} from 'react-router-dom'
import Base64 from '@/utils/base64'
import {MainRecommend} from '@/pages/main/MainRecommend'


const {Search} = Input

const reducer = (store: MainJSXType, action: MainAction):MainJSXType => {
	switch (action.type) {
		case 'list':
			return {
				...store,
				list: action.payload
			}
		default:
			return store
	}
}

const store:MainJSXType = {
	list: []
}

const base:Base64 = new Base64()
// const arg = (store) => store
const Main = () => {
	const navigate = useNavigate()
	const [state, dispatch] = useReducer(reducer, store)
	const [categoryList, setCategoryList] = useState<HomeCategoryType[]>([])
	const [active, setActive] = useState<boolean>(false)

	useEffect(() => {
		category().then(res => {
			if (res.code === 200) {
				setCategoryList(res.data)
			}
		})
	}, [])
	// 点击分类事件
	const onClick = useCallback((row: HomeCategoryType) => {
		const str = `search=${row.category_name}&category_id=${row.category_id}`
		navigate(`/home/product/${base.encode( str )}`, {
			replace: true
		})
	}, [])
	// 鼠标移入
	const onMouseOver = useCallback((item:HomeCategoryType) => {
		setActive(true)
		dispatch({
			type: "list",
			payload: item.children!
		})
	}, [])
	// 鼠标移出
	const onMouseOut = useCallback(() => {
		setActive(false)
	}, [])
	// 左侧分类
	const categoryListDom = useMemo(() => {
		return categoryList.map((item, i) => (
			<div
				key={item.category_id}
				style={{
					width: '100%',
					height: `calc(100% / ${categoryList.length})`,
					fontSize: '18px',
					color: '#e56a13',
					padding: '10px 0',
					boxSizing: 'border-box',
					borderBottom: `${i === (categoryList.length - 1) ? 0 : 1}px solid`,
				}}
			>
				<div
					className={main_category_list}
					onMouseEnter={() => onMouseOver(item)}
				>
					<div>
						<span
							onClick={() => onClick(item)}
						>{item.category_name}</span>
					</div>
					<div className={category_prent}>
						{
							item.children?.map(key => (
								<span
									onClick={() => onClick(key)}
									key={key.category_id}
								>{key.category_name}</span>
							))
						}
					</div>
				</div>
			</div>
		))
	}, [categoryList.length])
	// 分类鼠标移入显示
	const homeActive = useMemo(() => {
		if (active) {
			return (
				<div className={main_carousel_active}>
					{state.list.map(item => (
						<div key={item.category_id}>
							<div
								className={active_name}
								onClick={() => onClick(item)}
							>{item.category_name}</div>
							<div className={active_children}>
								{
									item.children?.map((key, i) => (
										<div key={key.category_id}>
											<span
												onClick={() => onClick(key)}
											>{key.category_name}</span>
											{i === (item.children?.length - 1) || (<i></i>) }
										</div>
									))
								}
							</div>
						</div>
					))}
				</div>
			)
		}
		return <HomeCarousel className={main_carousel}/>
	}, [active, state.list.length])

	const onSearch = (value: string) => {
		const str = `search=${value}`
		navigate(`/home/product/${base.encode(str)}`)
	}

	return (
		<div className={main}>
			<div className={main_search}>
				<Search
					onSearch={onSearch}
					addonBefore={<SearchOutlined />}
					size={'large'}
					enterButton={'搜索'}
					placeholder={'请输入'}
				></Search>
			</div>
			<div className={main_header} onMouseLeave={onMouseOut}>
				<div className={main_category}>
					{categoryListDom}
				</div>
				{homeActive}
			</div>
			<div className={main_product}>
				<h3>猜你喜欢</h3>
				<MainRecommend></MainRecommend>
			</div>
		</div>
	)
}

export default Main
